${require('./_head.html') title="Buttons" description="The essential button in pure HTML, without .classes for the default style." canonical="buttons.html" } ${require('./_nav.html')}
${require('./_sidebar.html') active="buttons-link"}

Buttons

The essential button in pure HTML, without .classes for the default style.

<button>Button</button>
<input type="submit">

Buttons are width: 100%; by default. Use role="button" on an inline element if you need an inline button.

Link Link 
<a href="#" role="button">Link</a>
<a href="#" role="button">Link</a>

Buttons come with .secondary and .contrast styles.

ℹ️ These classes are not available in the class-less version.

Secondary Contrast 
<a href="#" role="button" class="secondary">Secondary</a>
<a href="#" role="button" class="contrast">Contrast</a>

And a classic .outline variant.

Primary Secondary Contrast 
<a href="#" role="button" class="outline">Primary</a>
<a href="#" role="button" class="secondary outline">Secondary</a>
<a href="#" role="button" class="contrast outline">Contrast</a>
${require('./_footer.html')}